<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>
    <title></title>
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <script src="/static/js/layui.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <link rel="stylesheet" href="/static/css/layui.css">
    <link rel="stylesheet" href="/static/css/layui.mobile.css">
    <style>
      @font-face {font-family: "iconfont";
        src: url('/static/css/iconfont.eot?t=1490147664686'); /* IE9*/
        src: url('/static/css/iconfont.eot?t=1490147664686#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/static/css/iconfont.woff?t=1490147664686') format('woff'), /* chrome, firefox */
        url('/static/css/iconfont.ttf?t=1490147664686') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('/static/css/iconfont.svg?t=1490147664686#iconfont') format('svg'); /* iOS 4.1- */
      }

        .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }
        #containter{width:100%;margin:0 auto;min-width:300px;max-width:420px;background:rgb(246,248,249);padding:5px;}
        .body{background:#fff;width:100%;padding:20px 10px 0 10px;}
        .title{width:100%;}
        .title>span:nth-child(1){color:rgb(95,196,141);font-weight:800;}
        .title>span{font-size:16px;}
        .content{width:100%;padding:20px 10px 22% 10px;border:1px solid rgb(226,228,229);background:rgb(246,248,251);margin-top:10px;}
        .content>span:nth-child(1){color:rgb(241,157,56);font-size:16px;font-weight:800;}
        .content_detail{color:#333;font-size:16px;display:block;width:90%;margin:0 auto;border-style:none;background:rgb(246,248,251);resize:none;}
        .content>div{width:280px;height:50px;background:rgb(241,157,56);border:1px solid rgb(229,130,48);text-align:center;line-height:50px;font-size:18px;color:#fff;margin:20px auto;}
        .fun{height:40px;margin-top:10px;}
        .fun_read{color:#666;font-size:16px;float:left;margin:3px 10px 0 0;}
        .fun_zan{width:50px;height:30px;border:1px solid #fff;float:left;padding:3px 0 0 7px;border-radius:3px;}
        .fun_zan>i{font-size:16px;color:#666;}
        .fun_zan>span{font-size:18px;color:#666;}
        .zan{color:rgb(241,157,56)!important;}
        .com_time{float:right;}
        .com_content{color: #666;}
        .share{width:100%;padding:20px 10px 22% 10px;margin-top:10px;}
        .share>div{width:280px;height:50px;background:rgb(241,157,56);border:1px solid rgb(229,130,48);text-align:center;line-height:50px;font-size:18px;color:#fff;margin:20px auto;}

    </style>
</head>
<body>
    <section id="containter">
        <section class="body">
            <section class="title">
                <span>标题：</span>
                <span>{$data.title}</span>
            </section>
            <hr>

            {eq name="$data.type" value="1"}
                 <section>
                    {$data.content}
                </section>
                 <section class="share">
                <div>查看满意后点击右上角分享
                    <img src = "{$data.qrcode}" width='30%'/>
                </div>

            </section>
            {else/}
                <section class="content">
                    <!--<span>昵称:</span>-->
                    <textarea name="detail" class="content_detail" readonly="readonly" placeholder="{$data.content}"></textarea>
                    <div>查看满意后点击右上角分享
                        <img src = "{$data.qrcode}" width='30%'/>
                    </div>

                </section>
            {/eq}



            <section class="fun">
                <span class="fun_read">{$data.browse} 看过</span>
                <div class="fun_zan">
                    <span class="zan_num">{$data.zan}</span>
                    <i id = 'zan' class="iconfont">&#xe65d;</i>
                </div>
                <span style="float:right;margin: 5px 10px 0 0;">{$data.create_time|date='m-d H:i',###}</div>
            </section>
            <section>
                {foreach $comment as $vo}
                    <div>
                        <label>{$vo.username}：</label><div class="com_content">{$vo.content}</div>
                        <div class="com_time">{$vo.create_time|date='m-d H:i',###}</div>
                    </div>
                {/foreach}
                <br>
            </section>
            <section>
                <form  method="post" id='comment'>
                    <textarea placeholder="请输入评论内容"  name='comment' class="layui-textarea"></textarea>
                    <input type="hidden" name="pid" value="{$Request.param.id}">
                    <br>
                    <button class="layui-btn layui-btn-small" lay-filter="*" lay-submit>提交</button>
                </form>
            </section>
        </section>

    </section>
</body>
<script>

    $('.layui-btn').click(function(e) {
        e.preventDefault();
        $.post("{:url('News/savecomment')}",$("#comment").serialize(),function(data){
            alert(data.message)
        });
        location.reload();

    });


    var isZan ={$zan};
    if(isZan == 1){
        $('#zan').addClass("zan");
    }
    $(".body").height(window.screen.height);//获取屏幕分辨率的高度

    $(".fun_zan").on("click",function(){
        if($(this).find("i").hasClass("zan")){
            $(this).find("i").removeClass("zan");
            $num = $(this).find(".zan_num").html();
            $num = parseInt($num) - 1;
            $(this).find(".zan_num").html($num);
             $.ajax({
                url: "{:url('zan')}",
                type: 'DELETE',
                data:{id:{$Request.param.id}},
                success: function() {
                }
            });
        }else{
            $(this).find("i").addClass("zan");
            $num = $(this).find(".zan_num").html();
            $num = parseInt($num) + 1;
            $(this).find(".zan_num").html($num);
             $.ajax({
                url: "{:url('zan')}",
                type: 'POST',
                data:{id:{$Request.param.id}},
                success: function() {
                }
            });
        }
    });

     $(function(){
         $(".content_detail").bind("keydown keyup",function(){
             $(this).autosize();
         }).show().autosize();
     });

     $.fn.autosize = function(){
        $(this).height('0px');
        var setheight = $(this).get(0).scrollHeight;
        if($(this).attr("_height") != setheight)
        $(this).height(setheight+"px").attr("_height",setheight);
        else
        $(this).height($(this).attr("_height")+"px");
        }


</script>
</html>